<template>
  <div class="homePage">
    <el-row class="headerTop">
      <el-col :span="9" :offset="3">
        <div class="grid-content bg-purple">
          <p class="headTitleText"><span>绵阳人才市场</span></p>
        </div>
      </el-col>
      <el-col :span="10" :offset="1" class="loginAndlang">
        <div class="grid-content bg-purple">
          <!-- 管理员登陆 -->
          <p v-if="LoginInstauts===false">
            <el-dropdown trigger="click">
              <span class="userName">{{formatterString(realName, 5)}}<i class="el-icon-caret-bottom el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
          <p @click="toLogin('dashIndex/positionmanage')">管理中心</p>
          </el-dropdown-item>
          <el-dropdown-item>
            <p @click="toLogin('index/persondata')">账号设置</p>
          </el-dropdown-item>
          <el-dropdown-item>
            <p @click="logOff()">退出</p>
          </el-dropdown-item>
          </el-dropdown-menu>
          </el-dropdown>
          </p>
          <!-- 个人用户登录 -->
          <p v-else-if="LoginInstauts===0">
            <span @click="toLoginPackage('packagelistdetail')">会员特权</span>|
            <span @click="toLogin('personinbox/invitation')">收件箱</span>|
            <span @click="toLogin('deliverhistory')">投递箱</span>|
            <span @click="toMyResume()">我的简历</span>|
            <el-dropdown trigger="click">
	                      <span class="userName">
	                        {{formatterString(realName, 5)}}<i class="el-icon-caret-bottom el-icon--right"></i>
	                      </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
          <p @click="toLogin('index/persondata')">账号设置</p>
          <!-- <p @click="toLogin('index/')">账号设置</p> -->
          </el-dropdown-item>
          <el-dropdown-item>
            <p @click="logOff()">退出</p>
          </el-dropdown-item>
          </el-dropdown-menu>
          </el-dropdown>
          </p>
          <!-- 企业账号登陆 -->
          <p v-else-if="LoginInstauts=== 1">
            <span @click="toLoginPackage('packagelistdetail')">会员特权</span>|
            <span @click="toLogin('hiring/onlinebooking')">现场招聘</span>|
            <span @click="toLogin('companyrecive/companyinvitation')">发件箱</span>|
            <span @click="toLogin('companyinbox')">收件箱</span>|
            <span @click="toLogin('companypublish')">企业发布</span>|
            <el-dropdown trigger="click">
              <span class="userName">{{formatterString(realName, 5)}}<i class="el-icon-caret-bottom el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <!-- <p @click="toLogin('index/companyinfo/1')">账号设置</p> -->
          <p @click="toLogin('index/companydata')">账号设置</p>
          </el-dropdown-item>
          <el-dropdown-item>
            <p @click="logOff()">退出</p>
          </el-dropdown-item>
          </el-dropdown-menu>
          </el-dropdown>
          </p>
          <!-- 未登录状态 -->
          <p v-else style="line-height:1.5em;">
            <span @click="toLogin('userentry')" class="userName">登录</span>|
            <span @click="toLogin('userregister')" class="userName">注册</span>
          </p>
        </div>
      </el-col>
    </el-row>
    <el-row class="headerIcon">
      <el-col :span="10">
        <el-col :span="3" :offset="4">
          <img src="../assets/img/home/logo.png">
        </el-col>
        <div class="logoTitleText">
          <h1>绵阳人才市场</h1>
          <h2>{{logoTitleTextAE}}</h2>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="navLsit">
          <ul>
            <li class="liStyle" @click="toOther('/homepagesys')">
              <div class="list-item" id="/homepagesys">首页</div>
            </li>
            <li class="liStyle" @click="toOther('/company')">
              <div class="list-item" id="/company">公司</div>
            </li>
            <li class="liStyle" @click="toOther('/recruitment')">
              <div class="list-item" id="/recruitment">招聘</div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>

    <router-view></router-view>

    <div class="goTop" @click="onTop()" v-if="scroll>50">
      <el-tooltip content="回到顶部" placement="left" effect="light">
        <i class="fa fa-angle-double-up fa-3x"></i>
      </el-tooltip>
    </div>

    <hr color="#e8e8e8" height="1px" style="margin-top:50px;"/>
    <div class="link">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <span v-for="(item,index) in familyLink" class="friendlylinks"><a :href="item.path"
                                                                              target="_blank">{{item.name + '|'}}</a></span>
          </div>
        </el-col>
      </el-row>
      <el-row class="footer">
        <el-col :span="5" :offset="6" class="el_col_footerLogo" style="padding-right:0;">
          <img style="padding-bottom:5px;padding-right:3px;" src="../../src/assets/img/home/logo.png" height="24%"
               width="24%" @click="tohomePage()">
          <a href="http://bszs.conac.cn/sitename?method=show&id=081D25BCCCEE52DBE053022819ACF43B" target="_blank">
            <img src="../assets/img/home/danglogo.png" height="20%" width="20%">
          </a>
          <a href="http://114.55.181.28/errorInfo/search" target="_blank">
            <img src="../assets/img/home/mistake.png" height="40%" width="40%">
          </a>
        </el-col>
        <el-col :span="12" style="padding-left:20px;">
          <p class="a_footerText">主办：中共绵阳市委 绵阳市人民政府</p>
          <p>
            <a class="a_footerLink" href="http://www.miitbeian.gov.cn/"
               target="_blank">蜀ICP备12001441号-1</a>
            <img src="../assets/img/home/policelogo.jpg" height="20" width="20">
          <p class="a_footerLink">川公网安备 51070302110201号</p>
          </p>
        </el-col>
      </el-row>
    </div>
    <div class="footerlink"></div>
    <!-- 成为VIP提示框 -->
    <el-dialog title="提示" :visible.sync="showUptoVip" size="tiny">
      <p>尊敬的用户您好，你还未成为Vip用户，是否升级成为Vip用户？</p>
      <el-button @click="showUptoVip = false">取 消</el-button>
      <el-button type="primary" @click="goUptoVip()">确 定</el-button>
    </el-dialog>
  </div>
</template>
<script>
  import Data from '../assets/file/homePage.json'
  import Link from '../assets/file/homeLink.json'
  import { postDataToServer } from '../assets/js/post.js'
  import { optionCookie } from '../assets/js/cookie.js'
  import { resolution } from '../assets/js/resolution.js'

  export default {
    name: 'homePage',
    data () {
      return {
        isPackage: true,
        scroll: '',
        ContentSpan: 0,
        ContentOffset: 0,
        realName: '',
        userId: '',
        userType: '',
        activeIndex: '',
        LoginInstauts: true,
        showUptoVip: false,
        logoTitleTextAE: 'MianYang Talent Resources Market',
        pathArr: ['MyInterview', 'MyInvitation', 'DeliverHistory', 'MyResume', 'CompanyJobPublish', 'CompanyInboxList', 'CompanyInterviewList', 'CompanyInformation', 'PersonInformation']
      }
    },
    created () {
      this.createdComponent()
      this.getManagementRole()
      this.getResolution()
      let m = this.$route.path
      if (m === '/packagelistdetail') {
        this.isPackage = false
      }
      this.activeIndex = m
      this.setCountdown()
    },
    mounted () {
      window.addEventListener('scroll', this.onScroll)
    },
    methods: {
      //提示是否成为Vip
      PromptVip () {
        let _this = this
        let pramas = new Object()
        postDataToServer('').then((data) => {
          if (data.status === 0) {

          } else {

          }
        })
      },
      //升级成为Vip
      goUptoVip () {
        this.$router.push({'path': '/'})
      },
      //服务项到期提醒
      DueNotice () {
        let _this = this
        let pramas = new Object()
        /*postDataToServer("",pramas).then((data)=>{
                    if(data.status === 0){

                    }
                });*/
        this.$notify({
          title: '服务到期提醒',
          message: '您有服务到期了，是否续费?',
          type: 'warning',
        })
      },
      onScroll () {
        this.scroll = document.body.scrollTop || document.documentElement.scrollTop
      },
      onTop () {
        var timer = null
        cancelAnimationFrame(timer)
        timer = requestAnimationFrame(function fn () {
          var oTop = document.body.scrollTop || document.documentElement.scrollTop
          if (oTop > 0) {
            document.body.scrollTop = document.documentElement.scrollTop = oTop - 40
            timer = requestAnimationFrame(fn)
          } else {
            cancelAnimationFrame(timer)
          }
        })
      },
      toOther (item) {
        this.$router.push({'path': item})
        this.activeIndex = item
        this.isPackage = true
      },
      toLogin (path) {
        this.$router.push({'path': `/${path}`})
        this.isPackage = true
      },
      toLoginPackage (path) {
        this.$router.push({'path': `/${path}`})
        this.isPackage = false
      },
      createdComponent () {
        this.familyLink = Link
        this.hpdata = Data
      },
      //获取用户姓名
      getUserInfo () {
        let _this = this
        let path = ''
        _this.realName = '新用户'
        postDataToServer('ACCOUT_BASEINFO').then((data) => {
          if (data.status === 0) {
            _this.userType = data.type
            if (data.type === '0') {
              _this.LoginInstauts = 0
              _this.realName = data.personalinfo.real_name
              _this.userId = data.personalinfo.id
              if (this.$store.state.talentCenter === '管理员') {
                _this.LoginInstauts = false
              }
            } else if (data.type === '1') {
              _this.LoginInstauts = 1
              _this.realName = data.companyinfo.company_name
              _this.userId = data.companyinfo.id
            }
            _this.$store.state.real_name = _this.realName
            _this.$store.state.id = _this.userId
            _this.$store.state.user_type = _this.userType
          } else {
            _this.LoginInstauts = true
          }
        })
      },
      getManagementRole () {
        let _this = this
        let pramas = new Object()
        postDataToServer('ACCOUT_ROLES').then((data) => {
          if (data.status === 0) {
            this.$store.state.userEntry = true
            data.data_list.forEach((e) => {
              switch (e.subsys_name) {
                case '人才中心':
                  this.$store.state.talentCenter = e.role_name
                  break
                case '人才服务':
                  this.$store.state.talentservice = e.role_name
                  break
                case '人才交流':
                  this.$store.state.talentExchange = e.role_name
                  break
                case '新闻系统':
                  this.$store.state.newSys = e.role_name
                  break
                case '项目申报':
                  this.$store.state.porjectApp = e.role_name
                  break
              }
            })
          } else {
            this.$store.state.userEntry = false
          }
        }).then((data) => {
          this.getUserInfo()
        })
      },
      //截取姓名字段长度
      formatterString (str, len) {
        if (str.length > len) {
          return str.slice(0, len - 3) + '...'
        } else {
          return str
        }
      },
      //退出
      logOff () {
        let _this = this
        postDataToServer('USER_LOGOUT').then((data) => {
          if (data.status === 0) {
            let cookie = new Object()
            cookie.name = 'access_token'
            optionCookie('del', cookie)
            // this.$router.go(0);
            this.$router.push({'path': '/'})
            _this.LoginInstauts = true
          } else if (data.status === 1) {
            alert('失败')
          }
        })
      },
      //获取分辨率
      getResolution () {
        var key = screen.width + '*' + screen.height
        var s = resolution(key)
        if (screen.width < 1024) {
          this.$confirm('您的分辨率过低，无法正常显示客户端，是否跳转到移动端?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
        }
        this.ContentSpan = s
        this.ContentOffset = (24 - this.ContentSpan) / 2
        this.$store.state.Resolution = this.ContentSpan
        this.$store.state.ContentOffset = this.ContentOffset
      },
      //我的简历
      toMyResume () {
        let that = this
        let obj = new Object()
        postDataToServer('HM_RESUME_LISTALL', obj)
          .then(function (data) {
            if (data.data_list.length === 0) {
              that.$confirm('你还未新建简历！，是否新建简历?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                that.createResume()
              })
            } else {
              that.$router.push({'path': '/myresume/' + data.data_list[0].resume_id})
            }
          })
      },
      createResume () {
        let that = this
        let obj = new Object()
        let resume_id
        postDataToServer('HM_RESUME_ADD', obj)
          .then(function (data) {
            that.$router.push({'path': '/myresume/' + data.data_list.resume_id})
          })
      },
      //设置倒计时
      setCountdown () {
        let leftTime = localStorage.getItem('orderTime')
        if (leftTime !== null) {
          if (leftTime > 0) {
            leftTime--
            localStorage.setItem('orderTime', leftTime)
            setTimeout(this.setCountdown, 1000)
          } else {
            localStorage.removeItem('orderTime')
          }
        }
      }
    },
    watch: {
      '$route' (to, from) {
        if (to.name === 'TalentInfo' || to.name === 'SearchTalent') {
          this.activeIndex = '/recruitment'
        } else if (to.name === 'CompanyInfo' || to.name === 'SearchCompany') {
          this.activeIndex = '/company'
        } else if (to.name === 'SearchPosition' || to.name === 'homePageSys' || to.name === 'PositionInfo') {
          this.activeIndex = '/homepagesys'
        }
        if (to.name === 'PackageListDetail') {
          this.isPackage = false
        }
        for (let i = 0; i < this.pathArr.length; i++) {
          if (to.name === this.pathArr[i]) {
            this.activeIndex = ''
          }
        }
      },
      activeIndex (val, oldVal) {
        if (document.getElementById(val)) {
          document.getElementById(val).className = 'navClick'
        }
        if (document.getElementById(oldVal)) {
          document.getElementById(oldVal).className = 'list-item'
        }
      },
    }
  }
</script>
<style scoped>
  a {
    text-decoration: none;
  }

  body {
    font-family: "微软雅黑";
  }

  .goTop {
    position: fixed;
    right: 3em;
    bottom: 11.5em;
    text-align: center;
    color: #999;
    cursor: pointer;
  }

  .reback {
    position: fixed;
    right: 3em;
    bottom: 8em;
    text-align: center;
    color: #999;
  }

  /*首页顶部*/
  .headerTop {
    background-color: #105ab9;
    height: 3em;
    color: white;
    font-size: 12px;
  }

  .headTitleText {
    vertical-align: middle;
    display: table-cell;
    height: 3em;
    cursor: pointer;
  }

  .userName {
    cursor: pointer;
    color: white;
  }

  .loginAndlang p {
    text-align: center;
    margin-top: 0.7em;
    font-size: 1em;
  }

  .loginAndlang span {
    margin: 0px 10px;
    cursor: pointer;
  }

  /*图标与导航栏*/
  .headerIcon {
    color: #655F6A;
    padding: 0.3em 0.5em;
    font-size: 0.55em;
    background-color: #FAFAFA;
    border-bottom: 1px solid #DDD;
  }

  .headerIcon img {
    margin-top: 3px;
    width: 75%;
  }

  .logoTitleText {
    margin-top: 0.6em;
    margin-left: 0.6em;
  }

  .navLsit {
    font-size: 2.5em;
    color: black;
  }

  .liStyle {
    list-style: none;
    float: left;
    width: 20%;
    text-align: center;
    cursor: pointer;
    margin: 0em 1em;
  }

  .list-item {
    color: #999999;
    padding: 0.5em 0em;
    border-bottom: 3px solid #FAFAFA;
  }

  .list-item:hover {
    color: #333333;
    padding: 0.5em 0em;
    border-bottom: 3px solid #20A0FF;
  }

  .navClick {
    color: #333333;
    padding: 0.5em 0em;
    border-bottom: 3px solid #20A0FF;
  }

  .el-menu {
    font-size: 10px;
    background-color: #FAFAFA;
  }

  .el-menu-item {
    font-size: 2.5em;
  }

  /*首页底部链接*/
  .dealine {
    color: #e8e8e8;
    width: 100%;
    height: 1px;
  }

  .link {
    padding: 0em 2em;
    margin-top: 10px;
  }

  .friendlylinks {
    font-size: 11px;
  }

  .friendlylinks a:link, .friendlylinks a:active, .friendlylinks a:visited {
    color: black;
  }

  .friendlylinks a:hover {
    color: red;
  }

  .footer {
    margin-top: 10px;
    opacity: 0.6;
  }

  .footerlink {
    position: relative;
    bottom: 0;
    height: 0.5em;
    background-color: #105ab9;
  }

  .a_footerLink {
    font-size: 12px;
    color: black;
    cursor: pointer;
  }

  .a_footerText {
    font-size: 12px;
  }

  .el_col_footerLogo {
    border-right: 1px solid #999;
  }

  .a_footerLink:hover {
    color: red;
    text-decoration: underline;
  }
</style>
